<template>
  <div>
    <el-card class="box-card" style="height:auto;">
      <!-- 头部区域 -->
      <template #header>
        <div class="header">
          <span>课程名称:&nbsp;&nbsp;{{ courseName }}</span>
        </div>
      </template>
      <el-tabs type="border-card">
        <el-tab-pane label="课程信息">
          <el-descriptions :title=courseName>
            <el-descriptions-item label="授课老师">{{ teaName }}</el-descriptions-item>
            <br>
            <el-descriptions-item label="课程开始时间">{{ course.startTime }}</el-descriptions-item>
            <br>
            <el-descriptions-item label="课程结束时间">{{ course.endTime }}</el-descriptions-item>
            <br>
            <el-descriptions-item label="备注">
              {{ course.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <!-- -----------------------------------------------------------------------------查看作业 ------------------------------------------------------->
        <el-tab-pane label="查看作业">
          <!-- 作业列表 -->
          <el-row>
            <el-col :span="12" v-for="(item, index) in homework" :key="index">
              <el-card shadow="hover" style="background:floralwhite;margin-top: 20px;margin-left:8px ;">
                <div slot="header" style="color: coral">{{ item.name }}</div>
                <div>作业类型:&nbsp;{{ item.type }}</div>
                <div>&nbsp;</div>
                <div>作业内容:&nbsp;{{ item.content }}</div>
                <div>&nbsp;</div>
                <div>开始时间:&nbsp;{{ item.stime }}</div>
                <div>&nbsp;</div>
                <div>截至时间:&nbsp;{{ item.etime }}</div>
                <div>&nbsp;</div>
                <div class="coldiv" style="display: flex;justify-content: right;">
                  <el-button type="primary"
                    @click="workSubmit(item.stime, item.etime, item.homeworkid)">提交作业</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-empty v-if="this.homework == ''" description="暂无作业信息！" style="display: flex"></el-empty>
        </el-tab-pane>
        <!-- -----------------------------------------------------------------------------查看成绩 ------------------------------------------------------->
        <el-tab-pane label="查看成绩">
          <!-- 搜索表单 -->
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="作业类型:">
              <el-select placeholder="作业类型" v-model="Search.type">
                <el-option label="课堂任务" value="课堂任务"></el-option>
                <el-option label="课后任务" value="课后任务"></el-option>
                <el-option label="实验报告" value="实验报告"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getWorkGrade">查询</el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 课程成绩列表 -->
          <el-table :data="tabledata" style="width: 100%">
            <el-table-column label="作业标题" prop="homeworkname">
            </el-table-column>
            <el-table-column label="作业类型" prop="type">
            </el-table-column>
            <el-table-column label="分数" prop="grade">
            </el-table-column>
            <el-table-column label="建议" prop="feedback">
            </el-table-column>
            <template #empty>
              <el-empty description="没有数据" />
            </template>
          </el-table>

          <!-- 分页条 -->
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="this.pageNum" :page-sizes="[3, 5, 10]" :page-size=this.pageSize
              layout="total, sizes, prev, pager, next, jumper" :total=this.total>
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {

  data() {
    return {
      courseName: this.$route.query.courseName,
      courseId: this.$route.query.courseId,
      teaName: this.$route.query.teaName,
      classId: this.$route.query.classId,
      //变色
      backcolcor: '',
      pageNum: 1,
      pageSize: 5,
      total: 10,
      tabledata: [],
      Search: {
        type: ''
      },
      //作业数据模型
      homework: {
        homeworkid: '',
        name: '',
        type: '',
        content: '',
        stime: '',
        etime: ''
      },
      //课程信息数据模型
      course: {
        courseName: '',
        name: '',
        startTime: '',
        endTime: '',
        remark: ''
      }
    }
  },

  methods: {
    //重置
    reset() {
      this.Search.type = ''
    },
    //分页方法
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      console.log(pageSize)
      this.getWorkGrade()()
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getWorkGrade()()
      console.log(pageNum)
    },
    //作业成绩查看
    getWorkGrade() {
      request.get("/subwork/getworkgrade", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          stuId: localStorage.getItem("stuid"),
          courseId: this.$route.query.courseId,
          type: this.Search.type
        }
      }).then(res => {
        if (res.data.code == '0') {
          this.tabledata = res.data.data.list
          console.log(this.tabledata)
          this.total = res.data.data.total
        } else {
          this.$message.error("获取失败")
        }
      })
    },
    //提交作业方法
    workSubmit(stime, etime, id) {
      const start = new Date(stime)
      const end = new Date(etime)
      const current = new Date()
      if (start > current) {
        this.$message.error("作业未开放!!!")
      } else if (end < current) {
        this.$message.error("作业已截至!!!")
      } else {
        request.get("/subwork/findByid", {
          params: {
            homeworkId: id,
            stuId: localStorage.getItem("stuid")
          }
        }).then(res => {
          if (res.data.data == null) {
            this.$router.push({ path: '/WorkSubmit:homeworkId', query: { homeworkId: id } });
          } else {
            this.$message.success("作业已提交")
          }
        }).catch(error => {
          console.log(new error("服务异常"))
          this.$message.error("服务异常")
        })
      }
    },
    //获取作业信息
    getHomework() {
      request.get("/homework/findByid", {
        params: {
          courseid: this.courseId,
          classid: this.classId
        }
      }).then(res => {
        if (res.data.code == '0') {
          this.homework = res.data.data
        } else {
          this.$message.error("获取错误")
        }
      })
    },
    //获取课程信息
    getCourseInfo() {
      request.get("/course/findByid", {
        params: {
          id: this.$route.query.courseId
        }
      }).then(res => {
        if (res.data.code == '0') {
          console.log(res.data.data)
          this.course = res.data.data
        } else {
          this.$message.error("获取课程信息失败")
        }
      })
    }
  },

  created() {
    this.getCourseInfo()
    this.getHomework()
    this.getWorkGrade()
    console.log(this.$route.query.courseName)
    console.log(this.$route.query.courseId)
  }
}
</script>

<style></style>